<app-back-button></app-back-button>
<ng-container *ngIf="variants$ | async as ProductVariants">
  <app-image-slide
    [slides]="ProductVariants[selectedIndex].productVariantImages"
    [sliderHeight]="'22rem'"
    [intervalBySeconds]="0"
  >
  </app-image-slide>
  <div class="price-section">
    <div class="now-price">
      {{ ProductVariants[selectedIndex].price | currency: 'CNY' }}
    </div>
    <div class="list-price">
      {{ ProductVariants[selectedIndex].listPrice | currency: 'CNY' }}
    </div>
    <div class="sales-count">
      {{ ProductVariants[selectedIndex].product.priceDesc }}
    </div>
    <div class="title">
      {{ ProductVariants[selectedIndex].name }}
    </div>
    <div class="coupon">
      <span
        appTag
        [tagRadius]="'5px'"
        [tagPadding]="'2px 10px'"
        [tagSize]="'1rem'"
        [tagBgColor]="'#e02f29'"
        [tagColor]="'#fff'"
      >返现
      </span>
      <span class="desc">
        店铺内消费满39元减2元
      </span>
    </div>
    <div class="guarantee">
      <span>全场包邮</span>
      <span>•</span>
      <span>7天退换</span>
      <span>•</span>
      <span>48小时发货</span>
      <span>•</span>
      <span>假一赔十</span>
    </div>
    <app-group-short-list class="group-short-list" [row]="'3'"></app-group-short-list>
  </div>
  <div class="toolbar">
    <div class="icon-button">
      <img src="/assets/icons/more.png" alt="" />
      <div>更多</div>
    </div>
    <div class="icon-button">
      <img src="/assets/icons/favorite.png" alt="" />
      <div>收藏</div>
    </div>
    <div class="icon-button">
      <img src="/assets/icons/customer-service.png" alt="" />
      <div>客服</div>
    </div>
    <div class="direct-buy" (click)="handleDirectBuy(ProductVariants)">
      <div>
        {{ ProductVariants[selectedIndex].listPrice | currency: 'CNY' }}
      </div>
      <div>直接购买</div>
    </div>
    <div class="group-buy" (click)="handleGroupBuy(ProductVariants)">
      <div>{{ ProductVariants[selectedIndex].price | currency: 'CNY' }}</div>
      <div>发起拼单</div>
    </div>
  </div>
</ng-container>

